<style include="network-shared">
  :host {
    box-sizing: border-box;
    flex: 1;
    font-family: inherit;
    font-size: 100%;
    /* Specifically for Mac OSX, harmless elsewhere. */
    line-height: 154%;
    min-height: var(--cr-section-min-height);
    padding: 0;
  }

  :host(:not([embedded])) {
    padding: 0 var(--cr-section-padding);
  }

  :host([is-disabled_]) #apnName {
    opacity: var(--cr-disabled-opacity);
  }

  #labelWrapper {
    flex: 1;
    flex-basis: 0.000000001px;
    padding-bottom: var(--cr-section-vertical-padding);
    padding-top: var(--cr-section-vertical-padding);
    text-align: start;
  }

  #label,
  #subLabel {
    display: flex;
  }

  #subLabel {
    color: var(--cros-text-color-positive);
  }

  #autoDetected {
    color: var(--cr-secondary-text-color);
    margin-inline-start: 10px;
  }
</style>

<!-- TODO(b/162365553): Implement accessibility attributes. -->
<div id="labelWrapper">
  <div id="label" aria-hidden="true">
    <div id="apnName">[[apn.accessPointName]]</div>
    <div id="autoDetected" hidden="[[apn.id]]">
      [[i18n('apnAutoDetected')]]
    </div>
  </div>
  <div id="subLabel" class="cr-secondary-text" aria-hidden="true"
      hidden="[[!isConnected]]">
    [[i18n('OncConnected')]]
  </div>
</div>
<cr-icon-button id="actionMenuButton" class="icon-more-vert"
    on-click="onMenuButtonClicked_"
    title="[[i18n('apnMoreActionsTitle')]]"
    focus-row-control focus-type="menu">
</cr-icon-button>

<!-- TODO(b/162365553) Add a11y support-->
<cr-action-menu id="dotsMenu">
  <button id="detailsButton" class="dropdown-item"
      on-click="onDetailsClicked_">
    [[i18n('apnMenuDetails')]]
  </button>
  <template is="dom-if" if="[[shouldShowDisableMenuItem_(apn)]]" restamp>
    <button id="disableButton" class="dropdown-item"
        on-click="onDisableClicked_">
      [[i18n('apnMenuDisable')]]
    </button>
  </template>
  <template is="dom-if" if="[[shouldShowEnableMenuItem_(apn)]]" restamp>
    <button id="enableButton" class="dropdown-item"
        on-click="onEnableClicked_">
      [[i18n('apnMenuEnable')]]
    </button>
  </template>
  <template is="dom-if" if="[[shouldShowRemoveMenuItem_(apn)]]" restamp>
    <button id="removeButton" class="dropdown-item"
        on-click="onRemoveClicked_">
      [[i18n('apnMenuRemove')]]
    </button>
  </template>
</cr-action-menu>